<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>发表文章</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../../static/editor/css/editormd.css"
          th:href="@{${rootPath} + '/static/editor/css/editormd.css'}"/>
    <th:block th:include="common/link::link"></th:block>
    <style>
        /*为了解决layui.css和 editormd.css的冲突*/
        .editormd-code-toolbar > select{
            display: inline-block;
        }
    </style>
</head>
<body>

<div class="header">
    <th:block th:include="common/header::header"></th:block>
</div>

<div class="layui-container">
    <div class="fly-panel">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>发表/编辑文章</legend>
        </fieldset>
        <div class="layui-form layui-form-pane">
            <form class="layui-form">

                <div class="layui-row layui-col-space15 layui-form-item">
                    <div class="layui-col-md6">
                        <label class="layui-form-label">标题</label>
                        <div class="layui-input-block">
                            <input th:value="${article} ? ${article.title} :''" type="input" id="title" name="title" required
                                   lay-verify="required" autocomplete="off" class="layui-input">
                            <input type="hidden" id="articleId" name="articleId" th:value="${article} ? ${article.articleId} : 0">
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <label class="layui-form-label">主题</label>
                        <div class="layui-input-block">
                            <select lay-verify="required" id="subjectId">
                                <option></option>
                                <th:block th:if="not ${#lists.isEmpty(subjectList)}">
                                    <th:block th:each="subject,index:${subjectList}">
                                        <th:block th:if="not ${#lists.isEmpty(article)}">
                                            <th:block th:if="${article.subjectId} == ${subject.subjectId}">
                                                <option th:value="${subject.subjectId}" th:text="${subject.subjectTitle}"
                                                        selected></option>
                                            </th:block>
                                            <th:block th:unless="${article.subjectId} == ${subject.subjectId}">
                                                <option th:value="${subject.subjectId}"
                                                        th:text="${subject.subjectTitle}"></option>
                                            </th:block>
                                        </th:block>
                                        <th:block th:unless="not ${#lists.isEmpty(article)}">
                                            <option th:value="${subject.subjectId}"
                                                    th:text="${subject.subjectTitle}"></option>
                                        </th:block>

                                    </th:block>
                                </th:block>
                            </select>
                        </div>
                    </div>
                    <div class="layui-col-md3">

                        <div class="layui-form-item" pane="" style="margin-bottom: -8px">
                            <label class="layui-form-label">权限</label>
                            <div class="layui-input-block">
                                <input th:value="${article} ? ${article.permissions} :'0'"  type="checkbox"
                                       id="permissions" name="permissions" lay-filter="permissions" lay-skin="switch" lay-text="公开|私有"
                                       checked>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="layui-form-item">
                    <label for="articleDes" class="layui-form-label">摘要</label>
                    <div class="layui-input-block">
                        <input type="input" th:value="${article} ? ${article.articleDes}" id="articleDes" name="articleDes" required lay-verify="required" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <div class="layui-input-block ">
                        <div id="editormd-text">
                            <textarea style="display:none;" th:text="${article} ? ${article.mdContent}" required></textarea>
                        </div>
                    </div>
                </div>


                <div class="layui-row layui-col-space15 layui-form-item">
                    <div class="layui-col-md6">
                        <label class="layui-form-label">原文链接</label>
                        <div class="layui-input-block">
                            <input th:value="${article} ? ${article.original} :''" type="text" id="original" name="original" placeholder="为空既原创" class="layui-input">
                        </div>
                    </div>
                    <th:block th:if="${isApply} == true">
                        <div class="layui-col-md6">
                            <input type="checkbox" name="apply" value="0" id="apply" lay-filter="apply" title="首页投稿" checked>
                        </div>
                    </th:block>
                </div>
                <div class="layui-form-item">
                    <button class="layui-btn layui-btn-radius layui-btn-normal" lay-filter="pub" lay-submit>立即发布</button>
                    <button class="layui-btn layui-btn-radius " lay-filter="draft" lay-submit>保存草稿</button>

                </div>
            </form>
        </div>
    </div>
</div>

<script src="../../../static/editor/js/editormd.js" th:src="@{${rootPath} + '/static/editor/js/editormd.js'}"></script>
<script src="../../../static/editor/lib/marked.min.js" th:src="@{${rootPath} + '/static/editor/lib/marked.min.js'}"></script>
<script src="../../../static/editor/lib/prettify.min.js" th:src="@{${rootPath} + '/static/editor/lib/prettify.min.js'}"></script>
<script src="../../../static/editor/lib/raphael.min.js" th:src="@{${rootPath} + '/static/editor/lib/raphael.min.js'}"></script>
<script src="../../../static/editor/lib/underscore.min.js"
        th:src="@{${rootPath} + '/static/editor/lib/underscore.min.js'}"></script>
<script src="../../../static/editor/lib/sequence-diagram.min.js"
        th:src="@{${rootPath} + '/static/editor/lib/sequence-diagram.min.js'}"></script>
<script src="../../../static/editor/lib/flowchart.min.js"
        th:src="@{${rootPath} + '/static/editor/lib/flowchart.min.js'}"></script>
<script src="../../../static/editor/lib/jquery.flowchart.min.js"
        th:src="@{${rootPath} + '/static/editor/lib/jquery.flowchart.min.js'}"></script>


<script type="text/javascript">

    $(function () {
        var host = '[[${rootPath}]]';
        var testEditor = editormd("editormd-text", {
            width: "100%",
            height: 740,
            codeFold: true,
            //syncScrolling : false,
            saveHTMLToTextarea: true,    // 保存 HTML 到 Textarea
            searchReplace: true,
            //watch : false,                // 关闭实时预览
            //htmlDecode : "style,script,iframe|on*",            // 开启 HTML 标签解析，为了安全性，默认不开启
            //toolbar  : false,             //关闭工具栏
            //previewCodeHighlight : false, // 关闭预览 HTML 的代码块高亮，默认开启
            emoji: true,
            taskList: true,
            tocm: true,         // Using [TOCM]
            tex: true,                   // 开启科学公式TeX语言支持，默认关闭
            flowChart: true,             // 开启流程图支持，默认关闭
            sequenceDiagram: true,       // 开启时序/序列图支持，默认关闭,
            //dialogLockScreen : false,   // 设置弹出层对话框不锁屏，全局通用，默认为true
            //dialogShowMask : false,     // 设置弹出层对话框显示透明遮罩层，全局通用，默认为true
            //dialogDraggable : false,    // 设置弹出层对话框不可拖动，全局通用，默认为true
            //dialogMaskOpacity : 0.4,    // 设置透明遮罩层的透明度，全局通用，默认值为0.1
            //dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色，全局通用，默认为#fff
            imageUpload: true,
            imageFormats: ["jpg", "jpeg", "gif", "png"],
            imageUploadURL: "../qiniu/upload",
            /*                crossDomainUpload : true,
                            uploadCallbackURL : "http://localhost/editor.md/examples/php/upload_callback.html?test=dfdf",*/
            onload: function () {
                console.log('onload', this);
                //this.fullscreen();
                //this.unwatch();
                //this.watch().fullscreen();

                //this.setMarkdown("#PHP");
                //this.width("100%");
                //this.height(480);
                //this.resize("100%", 640);
            }
        });


        layui.use('form', function () {
            var form = layui.form;

            //各种基于事件的操作，下面会有进一步介绍
            form.on('switch(permissions)', function (data) {
                if (data.elem.checked) {
                    $("#permissions").val(0);
                } else {
                    $("#permissions").val(1);
                }
            });

            form.on('checkbox(apply)', function (data) {
                if (data.elem.checked) {
                    $("#apply").val(0);
                } else {
                    $("#apply").val(1);
                }
            });


            function postArticle(status) {
                var coverHtml = testEditor.getHTML();
                var pa=new RegExp("<img src=\"(.+?)\">");
                var result = pa.exec(coverHtml);
                var cover = '';
                if(null != result){
                    var num = result[1].indexOf('"');
                    cover = result[1].substring(0,num);
                }
                $.post(host+"/article",
                    {
                        "articleId":$("#articleId").val(),
                        "title":$("#title").val(),
                        "articleDes":$("#articleDes").val(),
                        "cover": cover,
                        "mdContent":testEditor.getMarkdown(),
                        "htmlContent":coverHtml,
                        "subjectId":$("#subjectId").val(),
                        "original":$("#original").val(),
                        "permissions":$("#permissions").val(),
                        "apply": $("#apply").val(),
                        "status":status
                    },
                    function(result){
                        if(result.success){
                            layer.msg("成功");
                            location.href = host + "/index.html";
                        }

                    }, "json");
            }
            //监听提交
            form.on('submit(pub)', function (data) {
                console.log(data.field);
                //alert(JSON.stringify(data.field));
                postArticle(1);
                return false;
            });
            form.on('submit(draft)', function (data) {
/*                layer.alert(JSON.stringify(data.field), {
                    title: '最终的提交信息'
                })*/
                postArticle(0);
                return false;
            });

        });

    });
</script>
<th:block th:replace="common/footer::footer"></th:block>
<script>

</script>

</body>
</html>